/*
Layout
*/

.layout,
.layout-row,
.layout-column{
	display: -ms-flexbox;
  display: flex;
}

.layout-row{
  	-ms-flex-direction: row;
    flex-direction: row;
    > .flex{
      min-width: 0;
    }
}

.layout-column{
  	-ms-flex-direction: column;
    flex-direction: column;
    > .flex{
      min-height: 0;
    }
}

.flex{
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.no-shrink{
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.no-grow{
  -ms-flex-positive: 0;
  flex-grow: 0;
}

.page-header{
  position: relative;
  z-index: 1020;
  transition: background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  &.sticky ~ * .page-sidenav.sticky{
    top: $navbar-height;
    height: calc(100vh - #{$navbar-height} );
  }
  &.scroll-down{
    
  }
  &:not(.sticky).scroll-up{
    position: fixed;
    left: 0;
    right: 0;
  }
}

.page-sidenav{
  position: relative;
  z-index: 1010;
  min-width: $aside-width;
  &.sticky{
    height: 100vh;
  }
}

.sticky{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.is-fullscreen #content{
  overflow: auto;
}

@include media-breakpoint-up(lg) {
  .page-container{
    max-width: 1140px;
    margin: 0 auto;
  }
  .page-sidenav {
    display: block !important;
  }
}

@include media-breakpoint-down(md) {
  .page-sidenav {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    position: fixed;
    z-index: 1050;
    display: none;
    opactiy: 0;
    background: transparent !important;
    > *{
      position: fixed;
      height: 100%;
      background-color: inherit;
      transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      transform: translate3d(-100%, 0, 0);
      width: $aside-slide-width;
    }
    &.show{
      > div{
        transform: translate3d(0, 0, 0);
      }
    }
  }
}

@media print {
  .page-sidenav,
  .page-header{
    display: none !important;
  }
}
